<!DOCTYPE html>
<html lang="en" id="app">
<head>
  <meta charset="UTF-8">
  <title>{{title}} {{currentFile.contents !== currentFile.lastSavedContents ? '*' : ''}}</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body class="{{orientation}}">
  <div id="header-container">
    <img id="logo" src="images/p5-logo.png">
    <button class="button" id="play" v-class="running: $root.running" v-on="click: $root.toggleRun()"></button>
    <h1 id="project-name" v-text="projectName"></h1>
    <div id="toolbar">
      <div id="actions">
        <img id="settings" class="button" title="Preferences" src="images/settings-button.svg" v-on="click: $root.toggleSettingsPane()">
      </div>
    </div>
  </div>
  <div id="flex-container">
    <div v-component="sidebar" v-with="files : files" id="side-container"></div>
    <div id="main-container">
      <div v-component="tabs" v-ref="tabs" id="tab-container"></div>
      <div id = "editor-container">
        <div v-component="editor" v-ref="editor" id="main"></div>
        <div v-component="debug" id="debug-container"></div>
      </div>
    </div>
  </div>

  <div v-component="settings" v-with="settings" v-show="showSettings" id="settingsContainer"></div>

  <input class="file-handler" id="openFile" type="file" />
  <input class="file-handler" id="saveFile" type="file" nwsaveas />
  <input class="file-handler" id="saveProject" type="file" nwsaveas />

  <script>
      //save the gui as a global
      var gui = window.require('nw.gui');

      //platform
      var isWin = process.platform === 'win32';
      var isMac = process.platform === 'darwin';
      var isLinux = process.platform === 'linux';

      //preserve node keywords
      var nodeRequire = require;
      var nodeProcess = process;
      var nodeGlobal = global;
      </script>
      <script src="js/main.js"></script>
    </body>
    </html>
